---
type: tutorial
title: Invia il tuo primo script al browser
description: >-
  Tutorial: Costruisci il tuo primo blog con Astro —

  Aggiungi interattività lato client alla tua navigazione mobile con un tag script
  di Astro
i18nReady: true
---
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Aggiungiamo un menu hamburger per aprire e chiudere i link su schermi di dimensioni ridotte, richiedendo un po' di interattività lato client!

<PreCheck>
  - Crea un componente menu hamburger
  - Scrivi un `<script>` per permettere ai visitatori del sito di aprire e chiudere il menu di navigazione
  - Sposta il tuo JavaScript in un file `.js`
</PreCheck>

## Costruisci un componente Hamburger

Crea un componente `<Hamburger />` per aprire e chiudere il menu mobile.

<Steps>
1. Crea un file chiamato `Hamburger.astro` in `src/components/`
  

2. Copia il seguente codice nel tuo componente. Questo rappresenterà il tuo menu "hamburger" a 3 linee per aprire e chiudere i link di navigazione su mobile. (Aggiungerai i nuovi stili CSS a `global.css` più tardi.)

    ```astro title="src/components/Hamburger.astro"
    --- 
    ---
    <div class="hamburger">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
    </div>
    ```

3. Posiziona questo nuovo componente `<Hamburger />` appena prima del componente `<Navigation />` in `Header.astro`. 

    <details>
    <summary>Mostrami il codice!</summary>

    ```astro title="src/components/Header.astro" ins={2,7}
    ---
    import Hamburger from './Hamburger.astro';
    import Navigation from './Navigation.astro';
    ---
    <header>
      <nav>
        <Hamburger />
        <Navigation />
      </nav>
    </header>
    ```
    </details>

4. Aggiungi i seguenti stili per il tuo componente Hamburger:

    ```css title="src/styles/global.css" ins={2-13, 56-58}
    /* stili nav */
    .hamburger {
      padding-right: 20px;
      cursor: pointer;
    }

    .hamburger .line {
      display: block;
      width: 40px;
      height: 5px;
      margin-bottom: 10px;
      background-color: #ff9776;
    }

    .nav-links {
      width: 100%;
      top: 5rem;
      left: 48px;
      background-color: #ff9776;
      display: none;
      margin: 0;
    }

    .nav-links a {
      display: block;
      text-align: center;
      padding: 10px 0;
      text-decoration: none;
      font-size: 1.2rem;
      font-weight: bold;
      text-transform: uppercase;
    }

    .nav-links a:hover, a:focus {
      background-color: #ff9776;
    }

    .expanded {
      display: unset;
    }

    @media screen and (min-width: 636px) {
      .nav-links {
        margin-left: 5em;
        display: block;
        position: static;
        width: auto;
        background: none;
      }

      .nav-links a {
        display: inline-block;
        padding: 15px 20px;
      }

      .hamburger {
        display: none;
      }
    }
    ```
</Steps>


## Scrivi il tuo primo tag script

Il tuo header non è ancora **interattivo** perché non può rispondere all'input dell'utente, come cliccare sul menu hamburger per mostrare o nascondere i link di navigazione. 

Aggiungendo un tag `<script>` fornisci JavaScript lato client per "ascoltare" un evento dell'utente e rispondere di conseguenza.

<Steps>
1. Aggiungi il seguente tag `<script>` a `index.astro`, appena prima del tag di chiusura `</body>`.

    ```astro title="src/pages/index.astro" ins={2-6}
      <Footer />
      <script>
        document.querySelector('.hamburger')?.addEventListener('click', () => {
          document.querySelector('.nav-links')?.classList.toggle('expanded');
        });
      </script>
    </body>
    ```

2. Controlla nuovamente l'anteprima del browser a varie dimensioni e verifica di avere un menu di navigazione funzionante che sia sia responsive alla dimensione dello schermo che risponda all'input dell'utente su questa pagina.
</Steps>

### Importare un file `.js`

Invece di scrivere il tuo JavaScript direttamente su ogni pagina, puoi spostare il contenuto del tuo tag `<script>` in un file `.js` separato nel tuo progetto.

<Steps>
1. Crea `src/scripts/menu.js` (dovrai creare una nuova cartella `/scripts/`) e sposta il tuo JavaScript al suo interno.

    ```js title="src/scripts/menu.js"
    document.querySelector('.hamburger').addEventListener('click', () => {
      document.querySelector('.nav-links').classList.toggle('expanded');
    });
    ```

2. Sostituisci il contenuto del tag `<script>` su `index.astro` con la seguente importazione del file:

    ```astro title="src/pages/index.astro" ins={7} del={3-5}
      <Footer />
      <script>
        document.querySelector('.hamburger')?.addEventListener('click', () => {
          document.querySelector('.nav-links')?.classList.toggle('expanded');
        });

        import "../scripts/menu.js";
      </script>
    </body>
    ```

3. Controlla nuovamente l'anteprima del browser a una dimensione ridotta e verifica che il menu hamburger apra e chiuda ancora i link di navigazione. 


4. Aggiungi lo stesso `<script>` con l'importazione alle altre due pagine, `about.astro` e `blog.astro` e verifica di avere un header responsive e interattivo su ogni pagina.

    ```astro title="src/pages/about.astro & src/pages/blog.astro" ins={2-4}
      <Footer />
      <script>
        import "../scripts/menu.js";
      </script>
    </body>
    ```
</Steps>

:::note[Da tenere presente]
Hai precedentemente usato un po' di JavaScript per costruire parti del tuo sito:

- Definendo dinamicamente il titolo della pagina e l'intestazione
- Iterando attraverso una lista di competenze nella pagina Su di me
- Mostrando condizionalmente elementi HTML

Quei comandi vengono tutti eseguiti al momento della build per creare HTML statico per il tuo sito, e poi il codice viene "scartato". 

**Il JavaScript in un tag `<script>` viene inviato al browser**, ed è disponibile per essere eseguito, in base a interazioni dell'utente come il refresh di una pagina o il toggle di un input.
:::



<Box icon="question-mark">

### Metti alla prova le tue conoscenze

1. Quando Astro esegue il JavaScript scritto nel frontmatter di un componente?
    <MultipleChoice>
      <Option>
       Astro non esegue mai JavaScript
      </Option>
      <Option isCorrect>
        al momento della build
      </Option>
      <Option>
         Quando un visitatore clicca un pulsante
      </Option>
    </MultipleChoice>

2. Opzionalmente, Astro può inviare JavaScript al browser per permettere:
    <MultipleChoice>
      <Option>
        agli utenti di cliccare sui link della pagina
      </Option>
      <Option>
        tempi di caricamento più veloci
      </Option>
      <Option isCorrect>
        interattività lato client
      </Option>
    </MultipleChoice>

3. Il JavaScript lato client verrà inviato al browser di un utente quando è scritto o importato:
    <MultipleChoice>
      <Option isCorrect>
        nei tag `<script>`
      </Option>
      <Option>
        tra i delimitatori di codice di un file `.astro`
      </Option>
      <Option>
        in `global.css`
      </Option>
    </MultipleChoice>

</Box>

<Box icon="check-list">

## Checklist

<Checklist>
- [ ] Posso aggiungere interattività lato client con JavaScript in un tag `<script>`.
- [ ] Posso importare un file `.js` in un tag `<script>`.
</Checklist>

</Box>

### Risorse

[Script lato client in Astro](/it/guides/client-side-scripts/)
